<template>
	<view style="background-color: #f4f4f4; width: 100%; height: 100%;">
		 <u-tabs :list="list1" @change="tabschange" @click="click"></u-tabs>
		 <view class="body"  style="margin-top: 15px;" v-for="a in auctionlist" :key="a.id">
		<u-row>
			<u-col span=5  style="margin-top: -15px;">
				
				<div style="width: 70px; height: 20px; background-color:aquamarine;position: relative;top: 30px;right:-60px;z-index: 1000; text-align: center;" v-if="a.transactionStatus==3" >竞拍结束</div>
				<div style="width: 70px; height: 20px;position: relative;top: 30px; font-size:11px; right:-270px;z-index: 1000; text-align: center;" v-if="a.transactionStatus==2" >竞价中</div>
				<div style="width: 70px; height: 20px; background-color:#71d5a1;position: relative;top: 30px;right:-60px;z-index: 1000; text-align: center;" v-if="a.checkStatus==1" >初审中</div>
				<div style="width: 70px; height: 20px; background-color:#71d5a1;position: relative;top: 30px;right:60px;z-index: 1000; text-align: center;" v-if="a.checkStatus==4" >二审中</div>
				<div style="width: 70px; height: 20px; background-color:#fcbd71;position: relative;top: 30px;right:60px;z-index: 1000; text-align: center;" v-if="a.checkStatus==2||a.checkStatus==6" >鉴定成功</div>
				<div style="width: 70px; height: 20px; background-color:#fab6b6;position: relative;top: 30px;right:-60px;z-index: 1000; text-align: center;" v-if="a.checkStatus==5 && a.transactionStatus==1">待开拍</div>
			<u--image  class="image1"  radius="10" width ="120px" height="110px"  :src="'http://101.43.223.224:8765/image/getImageById?id='+a.imgId.split(',')[0]"  ></u--image>		
			</u-col>
			<u-col span=7>
				<view style=" width: 100%; height: 30px; margin-top: 10px; "><p class="p1"> {{a.goodsName}}</p></view>
				<view style=" width: 100%; height: 20px;" v-if="a.transactionStatus==1 && a.checkStatus==1"><p class="p2">距开始：<text class="bb">2</text>天<text class="bb">12</text>:<text class="bb">05</text>:<text class="bb">08</text>	</p></view> 
				<view style=" width: 100%; height: 20px; " v-if="a.transactionStatus==3"><p class="p2" >结束时间2020年12月06日 12:20</p></view> 
				<view style=" width: 100%; height: 20px; " v-if="a.transactionStatus==4"><p class="p2" >结束时间2020年12月06日 12:20</p></view>
				<view style=" width: 100%; height: 20px; margin-top: 15px; "v-if="a.checkStatus==3"><p class="p2" >鉴定完成时间2020年12月06日 12:20</p></view> 
				<view style=" width: 100%; height: 20px; " v-if="a.transactionStatus==2"><p class="p2" >距结束：<text class="bb">2</text>天<text class="bb">12</text>:<text class="bb">05</text>:<text class="bb">08</text>	</p></p></view> 
				<view style="float: left; width: 100%; height: 30px; margin-top: 10px;"  >
					<p  style="float: left;">起拍价：</p>
					<p  style="float: left; color: red;">￥{{a.startPrice}}</p>
					<u-button v-if="a.checkStatus==2"  @click="tiaozhuan(a.id)" :customStyle="{}"> 设置拍卖信息</u-button>
					</view>
			</u-col>			
		</u-row>
		
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			sellerId:46,
			auctionlist2:[],
			auctionlist:[{
				id: '',
				goodsName:'', //拍卖名称
				startPrice:'',//起拍价钱
				imgId:'', //图片id
				transactionStatus:"", //拍卖状态
				startTime:'', //拍卖时间
			}],
				src:'/static/yc.jpg',
				  list1: [{
				                    name: '全部',
				                }
								,{
									name:'初审中'
								}
								,{
				                    name: '鉴定成功',
				                }
								,{
									name:'二审中'
								}
								, {
				                    name: '待开拍'
				                }, {
				                    name: '竞价中'
				                }, {
				                    name: '拍卖结束'
				                }]
			}
		},
		mounted () {
            var userId = uni.getStorageSync("loginId")
            if(userId){
                this.sellerId = userId
            } 
		  this.auctionwivi() //订单单查
         
		},
		methods: {
			auctionwivi(a){
                var that = this
				uni.request({
						url: "http://"+that.$host+":"+that.$port+"/listBysellerId/listBysellerId", 
							data:{
							sellerId:this.sellerId	
							},
					
						method: 'GET',
						dataType: 'json',
						success: (res) => {
						this.auctionlist = res.data.obj
						this.auctionlist2 = res.data.obj
						console.log(this.auctionlist.lenght)
							},                  	
						});
			},
			tiaozhuan(id){
				uni.navigateTo({
					url:'/pages/mine/auctionDetails/auctionDetails?id='+id 
				})
	},
			 click(item) {
			        console.log('item', item);
			        },
			tabschange(e){
				if(e.index == 0){
					this.auctionlist = this.auctionlist2
				}else if(e.index==1){
					this.auctionlist = this.auctionlist2.filter(a => {return a.checkStatus==1})
				}else if(e.index == 2){
					this.auctionlist = this.auctionlist2.filter(a => {return a.checkStatus==2})
				}else if(e.index == 3){
					this.auctionlist = this.auctionlist2.filter(a => {return a.checkStatus==4})
				}else if(e.index == 4){
					this.auctionlist = this.auctionlist2.filter(a => {return a.checkStatus==5 && a.transactionStatus==1})
				}else if(e.index == 5){
					this.auctionlist = this.auctionlist2.filter(a => {return a.checkStatus==5 && a.transactionStatus==2})
				}else if(e.index == 6){
					this.auctionlist = this.auctionlist2.filter(a => {return a.checkStatus==5 && a.transactionStatus==3})
				}
			}
						
		}
	}
</script>

<style>
.body{
	width: 95%;
	height: 140px;
	margin-top: 10px;
	background-color: #fff;

	margin: 0 auto;
	border-radius:15px;
}
.image1{
	margin-top: 10px;
	margin-left: 10px;
	/* float: left; */
}
.p1{
	font-size: 16px;
	font-weight: 500;
}
.p2{
		font-size: 12px;
}
.bb{
    color: black;
    background-color: white;
    border-radius: 5px 5px 5px 5px;
}
.bb{
    color: black;
    background-color: white;
    border-radius: 5px 5px 5px 5px;
}
</style>
